<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="admin/head :: head"></div>
    <title>角色管理</title>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a th:href="@{/admin}">首页</a>
        <a th:href="@{/admin/permission}">用户权限</a>
        <a>
          <cite>菜单管理</cite>
        </a>
      </span>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12  layui-form-pane">
            <div class="layui-form-item" id="x-city">
                <div class="layui-input-inline">
                    <select class="inline" name="role" lay-filter="rolechange">
                        <option th:each="item:${roles}" th:value="${item.id}" th:title="${item.name}" th:text="${item.description}"/>
                    </select>

                </div>
            </div>
        </form>
    </div>
    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加菜单','/admin/permission/menu/form')"><i class="layui-icon"></i>添加
        </button>
        <button class="layui-btn layui-btn-danger" onclick="del('/admin/permission/menu/delete/')"><i class="layui-icon"></i>批量删除
        </button>
        <button class="layui-btn inline" type="button" onclick="saveRelation()">保存该角色菜单配置</button>
        <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon">ဂ</i>
        </a>
        <span class="x-right" style="line-height:40px" th:text="|共有数据: ${menus.size()} 条|"></span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>ID</th>
            <th>菜单名称</th>
            <th>URL</th>
            <th>上级菜单</th>
            <th>菜单层级</th>
            <th>描述</th>
            <th>排序</th>
            <th>是否可见</th>
            <th>操作</th>
        </thead>

        <tbody class="x-cate">
            <tr th:attr="fid=${item.parent}, cate-id=${item.id}" th:each="item, index:${menus}">
                <td>
                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" th:attr="data-id=${item.id}"><i class="layui-icon">&#xe605;</i></div>
                </td>
                <td th:attr="id='id' + ${index.index}" th:text="${item.id}"></td>
                <td>

                    <span cus:space="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;, ${item.level - 1}"></span>

                    <i th:if="${item.subList ne null and item.subList.size() ne 0}" class="layui-icon x-show" status='true'>&#xe623;</i>
                    <span th:if="${item.subList eq null or item.subList.size() eq 0}">&nbsp;&nbsp;&nbsp;&nbsp;</span>

                    <span th:if="${item.level ne 1}">├</span>
                    <input type="text" class="layui-input width-50" th:attr="id='name' + ${index.index}" th:value="${item.name}">
                </td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='url' + ${index.index}" th:value="${item.url}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='parent' + ${index.index}" th:value="${item.parent}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='level' + ${index.index}" th:value="${item.level}"></td>
                <td><input type="text" class="layui-input x-sort" th:attr="id='description' + ${index.index}" th:value="${item.description}"></td>
                <td><input type="text" class="layui-input x-sort width-50" th:attr="id='order' + ${index.index}" th:value="${item.order}" ></td>
                <td>
                    <select th:attr="id='visible' + ${index.index}" class="layui-input x-sort" id="L_visible">
                        <option th:selected="${item.visible eq 0}" value="0">否</option>
                        <option th:selected="${item.visible eq 1}" value="1">是</option>
                    </select>
                </td>
                <td class="td-manage">
                    <button class="layui-btn layui-btn-warm layui-btn-xs" th:onclick="'save(' + ${index.index} + ')'"><i class="layui-icon">&#xe642;</i>保存</button>
                    <button class="layui-btn-danger layui-btn layui-btn-xs" th:onclick="'del(\'/admin/permission/menu/delete/\', ' + ${item.id} + ');'" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    layui.use(['laydate', 'table', 'form'], function () {
        $ = layui.jquery;
        var form = layui.form;

        form.on('select(rolechange)', function(obj) {
            var roleId = obj.value;
            loadCheckBox(roleId);
        })

    });

    $(function() {
        loadCheckBox(1);
    })

    function loadCheckBox(value) {
        $.ajax({
            type: 'get',
            url: '/admin/permission/relationrolemenu/' + value,
            dataType: 'json',
            success: function(result) {
                if(result.status == 200) {
                    var obj = $(".layui-form-checkbox").not('.header');
                    var arr = [];
                    obj.each(function (index, el) {
                        if(result.data.includes(parseInt(obj.eq(index).attr('data-id')))) {
                            obj.eq(index).addClass('layui-form-checked');
                        } else {
                            obj.eq(index).removeClass('layui-form-checked');
                        }
                    });
                } else {
                    layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                    return false;
                }
            },
            error: function(e) {
                layer.alert(Messages.ERROR, {icon: 1});
            }
        })
    }

    function save(index) {
        var data = {
            id: $('#id' + index).text(),
            name: $('#name' + index).val(),
            url: $('#url' + index).val(),
            parent: $('#parent' + index).val(),
            description: $('#description' + index).val(),
            order: $('#order' + index).val(),
            visible: $('#visible' + index).val(),
            level: $('#level' + index).val()
        }

        $.ajax({
            type: 'post',
            url: '/admin/permission/menu/save',
            data: data,
            dataType: 'json',
            beforeSend : function(xhr) {
                xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
            },
            success: function(result) {
                if(result.status == 200) {
                    layer.msg(Messages.SUCCESS, {icon: 6, time: 3000});
                } else {
                    layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                    return false;
                }
            },
            error: function(e) {
                layer.alert(Messages.ERROR, {icon: 1});
            }
        })
    }

    function saveRelation() {
        var roleId = $('select[name="role"]').val();
        var menus = tableCheck.getData();
        $.ajax({
            type: 'post',
            url: '/admin/permission/relationrolemenu/update/' + roleId,
            data: {menus: menus},
            dataType: 'json',
            beforeSend : function(xhr) {
                xhr.setRequestHeader($("meta[name='_csrf_header']").attr("content"), $("meta[name='_csrf']").attr("content"));
            },
            success: function(result) {
                if(result.status == 200) {
                    layer.msg(Messages.SUCCESS, {icon: 6, time: 3000});
                } else {
                    layer.alert(result.error == null || result.error == undefined ? Messages.ERROR : result.error, {icon: 1});
                    return false;
                }
            },
            error: function(e) {
                layer.alert(Messages.ERROR, {icon: 1});
            }
        })
    }

</script>
</body>

</html>